<template>
  <div class="container">
    <ul
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="100">
      <shop-item v-for="(item,index) in insideList" :key="index"></shop-item>
    </ul>
  </div>
</template>
<script>
import ShopItem from "./item";
export default {
  components: {
    ShopItem
  },
  name: "ShopList",
  props: {
    value: {
      type: Array,
      default: () => []
    },
    loading:{
      type: Boolean,
      default:false
    }
  },
  data() {
    return {
      insideList:[1]
    }
  },
  methods: {
    loadMore() {
      this.$emit('load');
    },
    handleDataInit(){
      this.insideList = this.value
    }
  },
  mounted(){
    this.handleDataInit()
  },
  watch:{
    value:function() {
      this.handleDataInit()
    }
  }
};
</script>
<style lang="less" scoped>
  @import "./shop-list.less";
</style>

